import React from 'react';
import ReactDOM from 'react-dom';
import { TabBar } from 'antd-mobile';
import './c-tabbar-module.css';
import Kyxxq from "../zkp/Kyxxq";
import Klibao from '../zkp/klibao';

// 组件
import CPrize from '../c-prize';
import Mrtx from '../lb/mrtx';
// 图片
import homeEd from '../images/home-ed.png';
import userEd from '../images/user-ed.png';
import TagEd from '../images/Tag-ed.png';
import PlayEd from '../images/Play-ed.png';
import Home from '../images/Home.png';
import Play from '../images/Play.png';
import Tag from '../images/Tag.png';
import user from '../images/user.png';
import KLunbo from '../zkp/index';
import Lbbom from '../zkp/lb-bom';
import Knav from '../zkp/nav';
import Kspsy from '../zkp/kspsy';

class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: '01',
      hidden: false,
      fullScreen: false,
    };
  }

  renderContent(pageText) {
    return (
      <div
        style={{
          backgroundColor: 'white',
          height: '100%',
        }}
        // 首页都放在此页面
      >
        <div style={{ paddingTop: 60 }}>{pageText}</div>
      </div>
    );
  }

  render() {
    return (
      <div
        className="tab-wp"
        style={
          this.state.fullScreen
            ? {
                position: 'fixed',
                minHeight: '133.4rem',
                width: '100%',
                bottom: 0,
              }
            : { height: '133.4rem' }
        }
      >
        <TabBar
          unselectedTintColor="#545454"
          tintColor="#f56f67"
          barTintColor="white"
          hidden={this.state.hidden}
          tabBarPosition="bottom"
        >
          <TabBar.Item
            title="首页"
            key="Life"
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Home}) center center /  21px 21px no-repeat`,
                  backgroundImage: homeEd,
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${homeEd}) center center /  21px 21px no-repeat`,
                }}
              />
            }
            selected={this.state.selectedTab === '01'}
            badge={0}
            onPress={() => {
              this.setState({
                selectedTab: '01',
              });
            }}
            data-seed="logId"
          >
            {/* 首页内容 */}
            {/* {this.renderContent(<CPrize></CPrize>)} */}
            
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Play}) center center /  21px 21px no-repeat`,
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${PlayEd}) center center /  21px 21px no-repeat`,
                }}
              />
            }
            title="视频"
            key="Koubei"
            //badge 可以是字符串
            badge={0}
            selected={this.state.selectedTab === '02'}
            onPress={() => {
              this.setState({
                selectedTab: '02',
              });
            }}
            data-seed="logId1"
          >
            {/* {this.renderContent('Koubei')} */}
            <Kspsy></Kspsy>
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${Tag}) center center /  21px 21px no-repeat`,
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${TagEd}) center center /  21px 21px no-repeat`,
                }}
              />
            }
            title="商城"
            key="Friend"
            selected={this.state.selectedTab === '03'}
            onPress={() => {
              this.setState({
                selectedTab: '03',
              });
            }}
          >
            {/* {this.renderContent('Friend')} */}
            <KLunbo></KLunbo>
            <Lbbom></Lbbom>
            <Knav></Knav>
            {/* <Kyxxq ></Kyxxq> */}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${user}) center center /  21px 21px no-repeat`,
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background: `url(${userEd}) center center /  21px 21px no-repeat`,
                }}
              />
            }
            title="我的"
            key="我的"
            selected={this.state.selectedTab === '04'}
            onPress={() => {
              this.setState({
                selectedTab: '04',
              });
            }}
          >
            {/* {this.renderContent('我的')} */}
            <Mrtx></Mrtx>
            


            
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default TabBarExample;
